<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>用户注册页面</title>
		
		<style>
		
			*{
				font-size: 12px;
				font-family: "微软雅黑";
			}
			
			
			#msg{
			
				color: red;
			}
		
		</style>
		<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
		
		<script type="text/javascript">
		
		
		$(function(){
			
			
			//1 用户名的逻辑
			$('input[name="username"]').blur(function(){
				var username = $(this).val();
				if($.trim(username) == ''){
					
					$('#msg').html('用户名不能为空...');
					return ;
				}
				
				$.post("checkUserIsExist.do",{
					'username':username,
					'password':''
					
				},function(data){
					
					if(data=='1'){
						$('#msg').html('该用户名'+username+'已经注册,请重新输入别的用户名...');
					}else{
						$('#msg').html('<font color="green">该用户名'+username+'可以正常注册...</font>');
					}
					
				});
				
			});
			
			//2 提交按钮的逻辑
			
			// 提交按钮绑定单击事件使用click()方法 这个click方法有返回值  如果返回false的话就提交表单 如果返回true的话就会提价表单
			$('input[type="submit"]').click(function(){
				var username = $('input[name="username"]').val();
				if($.trim(username) == ''){
					$('#msg').html('用户名不能为空...');
					return false;
				}
				
				var password = $('input[name="password"]').val();
				if($.trim(password) == ''){
					$('#msg').html('密码不能为空...');
					return false;
				}
				
				var exist = $('input[name="exist"]').val();
				if($.trim(exist) == '1'){
					$('#msg').html('用户名不能重复...');
					return false;
				}
				
				return true;
				
				
			});
			
			
		});
		
		
		</script>
		
	</head>
	
	<body>
	
		<font color="red">用户注册页面</font>
		<br/><br/>
		
		
		<!-- 注意2点：  2.1 在addUser前面不要打斜杠  2.2在addUser后面需要增加后缀.do -->
		<form action="addUser.do" method="post">
		
			<input type="hidden" name="exist" value="0">
			<table>
				<tr>
					<td>用户名：</td>
					<td>
						<input type="text" name="username">
					</td>
				</tr>
				
				<tr>
					<td>密&nbsp;&nbsp;&nbsp;&nbsp;码：</td>
					<td>
						<input type="password" name="password">
					</td>
				</tr>
				
				<tr>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		
		</form>
		
		
		<!-- 用来显示错误提示 -->
		<div id="msg"></div>
		
		
		<br/><br/>
		<a href="main.jsp">返回主页面</a><br/>
	
	</body>
</html>